<template>
  <div class="box">
    <div class="header">
      <div class="leftbar">
        <div class="img">
          <h2 class="title">企业融资服务平台</h2>
          <div class="subTitle">蚂蚁金服旗下融资平台</div>
        </div>
      </div>
      <div class="rightbar">
        <div class="login"></div>
        <SignIn v-if="hasAccount"/>
        <SignUp v-else/>
      </div>
    </div>
    <footer class="footer">相关融资服务由资本公司旗下北京金融信息服务有限公司提供 蚂蚁金服对企业融资服务拥有最终解释权</footer>
  </div>

  <!-- <a-button type="primary" @click="login">
  </a-button>-->
</template>
<script>
import SignIn from './SignIn'
import SignUp from './SignUp'
import { apiGetRegisterStatus } from '../../assets/api/api.user'

export default {
  name: 'Login',
  data () {
    return {
      hasAccount: true
    }
  },
  created () {

  },
  methods: {
    login () {
      this.$router.push('/home')
    },
    async getRegisterStatus () {
      const res = await apiGetRegisterStatus({
        companyId: this.companyId
      })
      if (res.error) {
        this.$message.error(res.error.msg)
      } else {
        if (res.data) {
          this.hasAccount = res.data === 2
        } else {
          this.$message.error(res.error.msg)
        }
      }
    }
  },
  components: {
    SignIn,
    SignUp
  }
}
</script>
<style lang="less" scoped>
.box {
  .header {
    height: 640px;
    .leftbar {
      width: 50%;
      height: 100%;
      float: left;
      background-color: #141a28;
      // background-color: blue;
      // background-color: rgba(16, 22, 37, 1);
      .img {
        width: 584px;
        height: 100%;
        float: right;
        background-image: url("../../assets/img/img_home.png");
        background-size: 480px 416px;
        background-repeat: no-repeat;
        background-position: 0 197px;
        .title {
          font-size: 36px;
          color: white;
          letter-spacing: 4px;
          margin: 120px 0 8px 0;
        }
        .subTitle {
          font-size: 16px;
          color: white;
          letter-spacing: 2px;
        }
      }
    }
    .rightbar {
      width: 50%;
      float: left;
      background: #fff;
      .login {
        width: 416px;
        height: 100%;
      }
    }
  }
  .footer {
    height: 46px;
    line-height: 46px;
    font-size: 10px;
    background-color: rgba(243, 244, 245, 1);
    text-align: center;
  }
}
</style>
<style lang="less">
.login {
  .loginTitle {
    height: 33px;
    font-size: 24px;
    margin: 120px auto 52px auto;
    text-align: center;
    font-weight: 500;
  }
  .loginItem {
    width: 320px;
    min-height: 60px;
    margin: 0 auto;
    font-size: 14px;
    position: relative;
    input {
      display: block;
      width: 100%;
      height: 38px;
      margin: 0 auto;
      border: none;
      outline: none;
      border-bottom: 1px solid #d9d9d9;
    }
    .signInErrTips {
      height: 20px;
      margin: 0 auto;
      margin-top: 2px;
      padding: 0;
      font-size: 12px;
      color: #fc5353;
    }
    .err {
      position: absolute;
      top: 37px;
      width: 0;
      height: 1px;
      background: 1px;
      &.isErr {
        width: 100%;
        background: rgba(252, 83, 83, 1);
      }
    }
  }
  .btn {
    width: 320px;
    height: 46px;
    margin: 0 auto;
    display: block;
    background: #115ad4;
    color: #fff;
    margin-top: 40px;
    outline: none;
  }
}
</style>
